<template>
<!--  https://blog.csdn.net/luxiaol/article/details/134611858-->
  <div class="patient_main">
    <div class="main" style="padding-bottom: 0px;">
      <div class="choose">
        <div class="quan" v-if="!coupon.empty_flag" v-for="(item, key) in coupon.coupon_list" :key="key">
          <div class="quanInfo">
            <div>
              <span style="color: #f01414;font-size: 30px;font-weight: bold;" v-if="item.discount === '1'">￥{{Math.abs(item.sale)}}</span>
              <span style="color: #f01414;font-size: 30px;font-weight: bold;" v-if="item.discount === '2'">{{item.sale.replace("*0.","")}}折</span>
              <span>&nbsp; &nbsp;</span>
              <span style="color: #f01414;font-weight: bold;" v-if="item.condition>0">满{{item.condition}}元可用</span>
              <span style="color: #f01414;font-weight: bold;" v-else>任意使用</span>
            </div>
            <div>适用于：{{ doctor.doctor_info.name }}医生专用劵</div>
            <div>有效期：{{item.start_time.split(" ")[0].replaceAll("-",".")}}-{{item.end_time.split(" ")[0].replaceAll("-",".")}}</div>
          </div>
          <div class="receiveBtn">
            <el-button class="receive" @click="toPay(item)">使用</el-button>
          </div>
        </div>
        <div class="choose-empty" v-if="coupon.empty_flag">
          <div class="dxd-empty">
            <div class="dxd-empty-image">
              <img src="../../assets/coupon/暂无.png">
            </div>
            <div class="dxd-empty-text" style="font-size: 13px;">暂无优惠券</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import coupon from "../../api/coupon.js";
import {ElMessage, ElMessageBox} from "element-plus";
import { useRouter, useRoute} from "vue-router";
import doctor from "../../api/doctor.js";
import pay from "../../api/pay.js";
const router = useRouter()
const route = useRoute()

onMounted(()=>{
  let token = sessionStorage.access_token || localStorage.access_token;
  coupon.get_coupon_list(token)
})

const toPay=(info)=>{
  console.log(info.user_coupon_id)
  console.log(info.get_discount_display)
  pay.user_coupon_id = info.user_coupon_id
  pay.discount_name = info.get_discount_display
  if (info.discount == '1') {
    doctor.doctor_info.price = localStorage.getItem("doctor_price")
    pay.coupon_name = '减免' + Math.abs(info.sale)
    pay.price = doctor.doctor_info.price - Math.abs(info.sale)
  } else if (info.discount == '2') {
    doctor.doctor_info.price = localStorage.getItem("doctor_price")
    pay.coupon_name = '折扣' + info.sale.replace("*0.","") + '折'
    console.log(info.sale)
    pay.price = doctor.doctor_info.price * info.sale.replace("*","")
  }
  console.log(pay.coupon_name)
  console.log(pay.price)
  router.push('/pay')
}

</script>

<style scoped>
.patient_main {
  background-color: #f4f4f4;
}

.main {
  width: 768px;
  height: 590px;
  margin: 0 auto;
}

.choose {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100vh;
  padding-bottom: 80px;
  overflow: auto;
  background: #fff;
}
.choose-empty {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.dxd-empty {
  padding: 40px 0;
  text-align: center;
}
.dxd-empty-image {
  height: 115px;
}
.dxd-empty-image img {
  height: 100%;
}
.dxd-empty-text {
  margin-top: 30px;
  color: #666;
  font-size: 1.5rem;
  line-height: 1.7rem;
}

/*优惠劵*/
.quan {
  margin: 22px 37px;
  background-color: #17dbcb;
  border-radius: 10px;
  display: flex;
  /*width: 400px;*/
  height: 100px;
}

.quanInfo {
  background-image: radial-gradient(
      circle at right top,
      #ffffff,
      #ffffff 15px,
      transparent 16px
  ),
  radial-gradient(
      circle at right bottom,
      #ffffff,
      #ffffff 15px,
      transparent 16px
  );
  border-right: 1px dashed #f64f51;
  padding: 10px 50px;
  width: 70%;
}
.receiveBtn {
  background-image: radial-gradient(
      circle at left top,
      #ffffff,
      #ffffff 15px,
      transparent 16px
  ),
  radial-gradient(
      circle at left bottom,
      #ffffff,
      #ffffff 15px,
      transparent 16px
  );
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -2px;
  background-color: pink;
}
.receive {
  border-radius: 23px;
  background-color: #5fc484;
  padding: 7px 31px;
  text-align: center;
  width: 30px;
  margin: 0 20px;
  font-size: 12px;
  color: #ffffff;
}
</style>